<template>
	<view class="container">
		<FeNavbar />
		<view class="page-title">修改邮箱</view>
		<view class="from-wrap">
			<!-- 验证老邮箱 -->
			<template v-if="step == 'one'">
				<view class="input-row-item">
					<view class="input-item-title">旧邮箱验证码</view>
					<view class="input-wrap">
						<image src="@/static/login/yzm.png" mode="aspectFill"></image>
						<view class="input-box">
							<input type="number" placeholder="请输入旧邮箱验证码" :maxlength="yzmMaxlength"
								v-model="submitData.oldEmailCode" placeholder-class="placeholderClass" />
						</view>
						<view class="yzm-btn" :class="emailOldCoding ? 'coding-bg' : ''" @click="handleGetOldEmailCode">
							<!-- {{emailOldCodeTips}}
							<u-code uniqueKey="old-email-code" :seconds="emailOldSeconds" changeText="X秒"
								@start="emailOldCodeStart" @end="emailOldCodeEnd" ref="refEmailOldCode"
								@change="emailOldCodeChange"></u-code> -->
							<smsCode ref="refEmailOldCode" />
						</view>
					</view>
					<view class="tip-txt">* 如旧邮箱已无法使用，需点击首页选择客服寻求人工处理</view>
				</view>
			</template>

			<!-- 新邮箱 -->
			<template v-if="step == 'two'">
				<view class="input-row-item">
					<view class="input-item-title">新邮箱</view>
					<view class="input-wrap">
						<image src="@/static/login/email.png" mode="aspectFill"></image>
						<view class="input-box">
							<input type="text" placeholder="请输入新邮箱" maxlength="20" v-model="submitData.email"
								placeholder-class="placeholderClass" />
						</view>
					</view>
				</view>
				<view class="input-row-item">
					<view class="input-item-title">验证码</view>
					<view class="input-wrap">
						<image src="@/static/login/yzm.png" mode="aspectFill"></image>
						<view class="input-box">
							<input type="number" placeholder="请输入邮箱验证码" :maxlength="yzmMaxlength"
								v-model="submitData.emailCode" placeholder-class="placeholderClass" />
						</view>
						<view class="yzm-btn" :class="emailCoding ? 'coding-bg' : ''" @click="handleGetEmailCode">
							<!-- {{emailCodeTips}}
							<u-code uniqueKey="new-email-code" :seconds="emailSeconds" changeText="X秒"
								@start="emailCodeStart" @end="emailCodeEnd" ref="refEmailCode"
								@change="emailCodeChange"></u-code> -->
							<smsCodeSuper ref="refEmailCode" />
						</view>
					</view>
				</view>
			</template>

			<view class="login-btn" @click="handleConfirm">确定</view>
		</view>
	</view>
</template>

<script>
	import smsCode from "@/components/smsCode/smsCode.vue"
	import smsCodeSuper from "@/components/smsCodeSuper/smsCodeSuper.vue"
	import {
		updateEmail,
		verifyOldEmail,
		userVerifyCode
	} from "@/api/user.js"
	import {
		validateEmail
	} from "@/util/helper.js"
	
	export default {
		components: {
			smsCode,
			smsCodeSuper
		},
		data() {
			return {
				step: "one",
				submitData: {
					oldEmailCode: "",
					email: "",
					emailCode: ""
				},
				yzmMaxlength: 6,

				emailOldCodeTips: "",
				emailOldSeconds: 60,
				emailOldCoding: false,

				emailCodeTips: "",
				emailSeconds: 60,
				emailCoding: false,

				oldEmailToken: null // 老邮箱的token
			};
		},
		onLoad() {

		},
		methods: {
			async handleConfirm() {

				if (this.step == "one") {
					if (this.isEmpty(this.submitData.oldEmailCode)) {
						uni.showToast({
							title: "请输入旧邮箱验证码",
							icon: "none"
						})
						return
					}
					this.step = "two";
					return
					uni.showLoading({
						title: "请稍后...",
						mask: true
					})
					const result = await verifyOldEmail({
						code: this.submitData.oldEmailCode
					});

					if (!this.isEmpty(result.data.token[0])) {
						uni.showToast({
							title: "老邮箱验证成功",
							icon: "none",
							duration: 2000
						})
						setTimeout(() => {
							// this.$refs.refEmailCode.reset();
							this.step = "two";
							// this.$refs.refEmailOldCode.reset();
						}, 2000)
						this.oldEmailToken = result.data.token[0];
					} else {
						uni.showToast({
							title: "获取老邮箱token失败",
							icon: "none",
							duration: 2000
						})
					}

					return
				}

				if (this.isEmpty(this.submitData.email)) {
					uni.showToast({
						title: "请输入新邮箱",
						icon: "none"
					})
					return
				}
				if (!validateEmail(this.submitData.email)) {
					uni.showToast({
						title: "输入邮箱有误",
						icon: "none"
					})
					return
				}
				if (this.isEmpty(this.submitData.emailCode)) {
					uni.showToast({
						title: "请输入邮箱验证码",
						icon: "none"
					})
					return
				}

				uni.showModal({
					title: "修改邮箱",
					content: "确定修改吗？",
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: "提交中..."
							})
							await updateEmail({
								email: this.submitData.email,
								code: this.submitData.emailCode,
							}, this.oldEmailToken);
							uni.showToast({
								title: "修改成功",
								duration: 3000
							})
							// setTimeout(() => {
							// 	getApp().handleQuitLogin();
							// }, 2000)
						}
					}
				})
			},

			/************* 老邮箱验证码btn方法 *****************/
			async handleGetOldEmailCode() {
				if (this.$refs.refEmailOldCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					await userVerifyCode({
						email: getApp().globalData.userInfo.email
					});

					uni.showToast({
						title: "验证码已发您邮箱",
						icon: "none",
						duration:3000
					})

					// 通知验证码组件内部开始倒计时
					this.$refs.refEmailOldCode.start();
				}
			},
			// emailOldCodeChange(text) {
			// 	this.emailOldCodeTips = text;
			// },
			// emailOldCodeStart() {
			// 	this.emailOldCoding = true;
			// },
			// emailOldCodeEnd() {
			// 	this.emailOldCoding = false
			// },
			/************* 老邮箱验证码btn方法 *****************/


			/************* 新邮箱验证码btn方法 *****************/
			async handleGetEmailCode() {
				if (this.isEmpty(this.submitData.email)) {
					uni.showToast({
						title: "请输入新邮箱",
						icon: "none"
					})
					return
				}
				if (!validateEmail(this.submitData.email)) {
					uni.showToast({
						title: "输入邮箱有误",
						icon: "none"
					})
					return
				}
				if (this.$refs.refEmailCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					await userVerifyCode({
						email: this.submitData.email
					});

					uni.showToast({
						title: "验证码已发您邮箱",
						icon: "none",
						duration:3000
					})

					// 通知验证码组件内部开始倒计时
					this.$refs.refEmailCode.start();
				}
			},
			// emailCodeChange(text) {
			// 	this.emailCodeTips = text;
			// },
			// emailCodeStart() {
			// 	this.emailCoding = true;
			// },
			// emailCodeEnd() {
			// 	this.emailCoding = false
			// }
			/************* 新邮箱验证码btn方法 *****************/
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.page-title {
			font-size: 50rpx;
			font-weight: 600;
			color: #26282B;
			line-height: 60rpx;
			padding: 32rpx 0 16rpx 32rpx;
		}

		.from-wrap {
			padding: 0 32rpx;

			.input-row-item {

				.input-item-title {
					font-size: 26rpx;
					color: #7B828A;
					margin: 32rpx 0 12rpx 0;
				}

				.input-wrap {
					height: 96rpx;
					background-color: #F4F5F7;
					border-radius: 12rpx;
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin: 0 28rpx;
					}

					.input-box {
						height: 100%;
						flex: 1;
						padding-right: 28rpx;
						color: #26282B;

						input {
							border: 0;
							width: 100%;
							height: 100%;
							font-size: 32rpx;
						}
					}

					.yzm-btn {
						width: 196rpx;
						height: 76rpx;
						line-height: 76rpx;
						font-size: 26rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #26282B;
						text-align: center;
						background-color: #FFE269;
						border-radius: 12rpx;
						margin-right: 10rpx;
						overflow: hidden;
					}

					.coding-bg {
						background-color: #D2D9E1;
					}

					.placeholderClass {
						color: #969696;
						font-size: 28rpx;
					}
				}

				.tip-txt {
					font-size: 26rpx;
					line-height: 30rpx;
					text-align: center;
					color: #A6ACB4;
					margin-top: 16rpx;
				}
			}

			.login-btn {
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 12rpx;
				background: #FFE269;
				display: block;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
				color: #26282B;
				margin-top: 88rpx;
			}
		}
	}
</style>